import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';
import KeyValue from '@shell/components/form/KeyValue';

<Meta
  title="Components/Form/KeyValue"
  component={KeyValue}
/>


export const Template = (args, { argTypes }) => ({
  components: { KeyValue },
  props:      Object.keys(argTypes),
  template:   `<KeyValue v-bind="$props" />`,
})

# KeyValue

Complex component for handling list of key value pairs.

### Description

- Allows to protect defined keys
- Allows to hide protected keys without modify the data 


#### Default

<Canvas>
  <Story
    name="KeyValue"
    args={{
      value: {
        foo: 'bar',
        bar: 'foo',
      },
      toggleFilter: false
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

#### Protected

It's possible to define protected pairs, making not possible to edit, nor delete the values.
Toggle "toggleFilter" to hide the values

<Canvas>
  <Story
    name="Protected"
    args={{
      value: {
        foo: 'bar',
        bar: 'foo',
        test1: 'this is disabled',
        test2: 'this is disabled',
        test3: 'this is disabled',
      },
      toggleFilter: true,
      protectedKeys: ['test1', 'test2', 'test3'],
    }}>
    {Template.bind({})}
  </Story>
  
  <Story
    name="Protected with multiline values"
    args={{
      value: {
        foo: 'bar',
        bar: 'foo',
        test1: `this is disabled
this is second line
this is third line`,
        test2: 'this is disabled',
        test3: 'this is disabled',
      },
      toggleFilter: true,
      valueMultiline: true,
      protectedKeys: ['test1', 'test2', 'test3'],
    }}>
    {Template.bind({})}
  </Story>
  
  <Story
    name="Protected with key suggestions"
    args={{
      value: {
        foo: 'bar',
        bar: 'foo',
        test1: 'this is disabled, try to add a new one with suggestion',
      },
      toggleFilter: true,
      keyOptions: ['test which will be disabled'],
      protectedKeys: ['test1', 'test which will be disabled'],
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Import 

<Source
  language='js'
  light
  format={false}
  code={`
     import KeyValue from '@shell/components/form/KeyValue';
  `}
/>


### Props table
<ArgsTable of={KeyValue} />